<!-- src/components/FilterTodos.vue -->
<template>
    <div class="filter-container">
        <span class="label">TodoFilter:</span>
        <el-select v-model="selectedValue" @change="onFilterChange" placeholder="请选择" class="filter-select">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const options = [
    { value: '200', label: '200' },
    { value: '100', label: '100' },
    { value: '50', label: '50' },
    { value: '20', label: '20' },
    { value: '10', label: '10' },
    { value: '5', label: '5' }
]

const selectedValue = ref('200')
const emit = defineEmits(['filter-change'])

const onFilterChange = (val) => {
    emit('filter-change', parseInt(val))
}
</script>

<style scoped>
.filter-container {
    margin-bottom: 1rem;
}

.label {
    font-size: 2em;
    font-weight: bold;
    margin-right: 8px;
}

.filter-select {
    width: 100px;
}
</style>